// Copyright (c) [2021] [daifang]
// [Dcomponent] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2.
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
// See the Mulan PSL v2 for more details.
import './index.less'
import {NavLink} from 'react-router-dom'
import {useEffect, useState} from 'react'
import PropTypes from 'prop-types'

// 导航栏
function Nav(props){
    let {
      navList,            //   数据 
      // position,        //   定位  
      width,              //   宽度
      // theme,           //   主题
      title,               //   标题
      showSwitch,          // 是否显示开关
      replace
    } = props
    let [style,setStyle] = useState({
      width:`${width}px`
    })
    let [menuState, setMent] = useState(true)
    let [hash, setHash] = useState('')
    useEffect(()=>{
      window.onhashchange = (e)=>{
        // console.log(e.newURL.split('#')[1])
        setHash(e.newURL.split('#')[1])
      }
    },[])
    return(
      <>
        <div 
        className={`menu ${menuState?'openM':'closeM'}`}
        style={style}
      >
        <h1>{title?title:'目录'}</h1>
        {
          navList.map((val, index) => {
            // console.log(val.path)
              return (
                <NavItem
                  key={index}
                  replace={replace}
                  item={val}
                  hash = {hash}
                  className={hash===val.path && 'sticky'}
                  // children={val.children}
                />
              )
          })
        }
      </div>
      {showSwitch?<NavSwitch 
        menuState={menuState} 
        switchs={(menuState)=>{
          setMent(menuState);
          if(menuState){
            setStyle({width:`${width}px`})
          }else setStyle({})
        }} 
        left={width}
      />:null}
      </>
    )
}
Nav.propTypes = {
  navList:PropTypes.array,             //   数据 
  menuState:PropTypes.bool,            //   状态 
  // position,                         //   定位  
  width:PropTypes.number,              //   宽度
  // theme,                            //   主题
  setMent:PropTypes.func,              //   设置状态 
  title:PropTypes.string,               //   标题
  showSwitch:PropTypes.bool,             // 是否显示开关
  replace:PropTypes.bool
}
// 默认值
Nav.defaultProps = {
  showSwitch:true,
  title:'导航栏',
  menuState:true,
  width:150,
  replace:true
}

// 导航栏开关
function NavSwitch(props){
  //     状态        改变状态 左边距
    let {menuState, switchs, left, children, style} = props
    let [styleWidth,setStyle] = useState({
      left:`${left}px`
    })
    return(
        <div 
        className={`close ${menuState?'openC':'closeC'}`}
        style={{
          ...styleWidth,
          ...style
        }}
        onClick={()=>{
            switchs(!menuState)
            if(!menuState){
              setStyle({left:`${left}px`})
            }else setStyle({})
        }}  
        // onMouseOver={()=>{
        //   if(!menuState){
        //     switchs(!menuState)
        //     setStyle({left:`${left}px`})
        //   }
        // }}
      >{children?children:'|||'}</div>
    )
}

NavSwitch.propTypes = {
  menuState:PropTypes.bool,            //   状态 
  switchs:PropTypes.func,
  width:PropTypes.number,
  style:PropTypes.object
}
// 默认值
NavSwitch.defaultProps = {
  menuState:true,            //   状态 
  width:40,
  style:{}
}

function NavItem (props){
  let { item, className, replace, hash } = props
  let [isOpen, setOpen] = useState(false)
  return <div className={`navItem ${hash} ${className || ''}`}>
    {
      (item?.children?.length <= 0 || !item?.children) && <NavLink 
        replace={replace}
        to={item.path} 
        className='navLink'
        activeClassName='activeNav'
      >
        {item.label}
      </NavLink>
    }

      {item?.children?.length > 0 && <div className='navLink' onClick={()=>{
        setOpen(!isOpen)
      }}>
        {item.label}
        {item?.children?.length > 0 && <i onClick={()=>{
          setOpen(!isOpen)
        }} className={`iconfont icon-xiajiantou ${isOpen ? 'open-i' : 'close-i'}`}></i>}
      </div>}
      <div className={`nav-children nav-${isOpen?'open':'close'}`}>
      {item?.children?.map((itemm, idx)=>{
        return <NavLink 
                  key={idx}
                  replace={replace}
                  to={itemm.path}
                  className='navLink-child'
                  activeClassName='activeNav'
            >{itemm.label}</NavLink>
          })}
      </div>
  </div>
}


export {NavSwitch, NavItem}
export default Nav